<template>
  <div ref="xxx">
    <button @click="handlerclick(true)">open</button>
    <button @click="handlerclick(false)">close</button>
    <button @click="handleData()">获取数据</button>
  </div>

</template>

<script>
import axios from "axios"
let viewer = null;
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() { },
  mounted() {
    this.init();
    let screenSpaceEventHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    screenSpaceEventHandler.setInputAction(function (e) {
      // 获取选中的S3M图层
      let selectlayer = viewer.scene.layers.getSelectedLayer()
      // 获取选中模型的id
      let selectid = selectlayer.getSelection()[0]
      console.log("单机----->",selectid);
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
  },
  methods: {
    init() {
      viewer = new Cesium.Viewer(this.$refs.xxx);
      viewer.globe = false;
      viewer.imageryLayers.get(0).show = false; //不显示底图
      // viewer.imageryLayers.addImageryProvider(
      //   new Cesium.CGCS2000MapServerImageryProvider({
      //     name: '杭州底图',
      //     url: 'https://kjzzyy.hzsgis.com/Ip109-232-8080/C1DC5DAA62D342D7B5395525C7AD4BB96EB680B39B9DE1B4DA44307B9450FC5700C42E754F5CC4A6071252ECD95372D8/PBS/rest/services/hzsyvector/Mapserver',
      //     suggest: true,
      //   }),
      // );
      // viewer.scene.addVectorTilesMap({
      //   url: '/Ip-tielu/iserver/services/map-ShengTaiBaoHuHongXian/rest/maps/%E7%94%9F%E6%80%81%E4%BF%9D%E6%8A%A4%E7%BA%A2%E7%BA%BF_%E9%87%91%E5%BB%BA%E9%93%81%E8%B7%AF%E6%95%B0%E6%8D%AE@%E7%94%9F%E6%80%81%E4%BF%9D%E6%8A%A4%E7%BA%A2%E7%BA%BF',
      //   // canvasWidth: 512,
      //   name: '1',
      //   viewer: viewer,
      // });
      // this.handlerclick(true)
      viewer.scene.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(
          119.48898233859406,
          29.94018203147318,
          252460.1101064507,
        ),
      });
      // //创建天空盒
      //   var sunSkyBox = new Cesium.SkyBox({
      //       sources: {
      //           positiveX: './images/1111.webp',
      //           negativeX: './images/1111.web',
      //           positiveY: './images/1111.web',
      //           negativeY: './images/1111.web',
      //           positiveZ: './images/1111.web',
      //           negativeZ: './images/1111.web'
      //       }
      //   });
      //   scene.skyBox = sunSkyBox;
    },
    // 图层点击事件
    layerClickHandler() {
      chaos = getChaos();
      Viewer = chaos.viewer;
      Cesium = chaos.cesium;
      const that = this;
      const scene = Viewer.scene;
      clickHandler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
      clickHandler.setInputAction(function (e) {
        console.log(e);
        that.successNum = 0;
        // that.closeAll();
        const position = scene.pickPosition(e.position);

        const cartographic = chaos.cesium.Cartographic.fromCartesian(position);
        const longitude = chaos.cesium.Math.toDegrees(cartographic.longitude);
        const latitude = chaos.cesium.Math.toDegrees(cartographic.latitude);
        const queryPoint = {
          x: longitude,
          y: latitude,
        };
        console.log('当前坐标', queryPoint);
      }, chaos.cesium.ScreenSpaceEventType.LEFT_CLICK);
    },
    handlerclick(type) {
      console.log(Cesium.VERSION)
      const vectorTileset = viewer.scene.getVectorTilesMap('shengtaibaohuhongxian');
      const tilesetCollection = viewer.scene.primitives;
      if (type) {
        if (vectorTileset) {
          vectorTileset.show = true
        } else {
          viewer.scene.addVectorTilesMap({
            // url: '/Ip-tielu/iserver/services/map-ShengTaiBaoHuHongXian/rest/maps/%E7%94%9F%E6%80%81%E4%BF%9D%E6%8A%A4%E7%BA%A2%E7%BA%BF_%E9%87%91%E5%BB%BA%E9%93%81%E8%B7%AF%E6%95%B0%E6%8D%AE@%E7%94%9F%E6%80%81%E4%BF%9D%E6%8A%A4%E7%BA%A2%E7%BA%BF',
            // url: "/Ip-tielu/iserver/services/map-XingZhengQuYu/rest/maps/%E8%A1%8C%E6%94%BF%E5%8C%BA%E5%9F%9F_%E9%87%91%E5%BB%BA%E9%93%81%E8%B7%AF%E6%95%B0%E6%8D%AE@%E8%A1%8C%E6%94%BF%E5%8C%BA%E5%9F%9F",
            // url: "/Ip-tielu/iserver/services/map-FangZhiFanWei-2/rest/maps/FZ_新建金华至建德高速铁路_1%40防治范围",
            url: "/Ip-tielu/iserver/services/map-LinShiYongDiFanWei/rest/maps/临时用地范围数据%40临时用地范围",
            // canvasWidth: 512,
            name: 'xx',
            viewer: viewer,
          });
          // const layerName = viewer.imageryLayers.addImageryProvider(
          //   new SuperMap3D.SuperMapImageryProvider({
          //     url: '/Ip-tielu/iserver/services/map-LinShiYongDiFanWei-3/rest/maps/临时用地范围数据%40临时用地范围',
          //     packingRequest: 1,
          //   })
          // )
        }

      } else {

        // tilesetCollection.remove(vectorTileset);
        if (vectorTileset !== undefined) {
          // vectorTileset.hide(); //1.67版本下不支持
          // 
          vectorTileset.show = false
          // viewer.scene.removeVectorTilesMap(vectorTileset)
          // tilesetCollection.remove(vectorTileset);

        }
      }
      // const paramdata = {
      //   getFeatureMode: 'SPATIAL',
      //   datasetNames: [`${services.options.datasourceName}:${services.options.datasetName}`],
      //   geometry: {
      //     id: 0,
      //     parts: [1],
      //     points: positions,
      //     type: positions.length > 1 ? 'REGION' : 'POINT'
      //   },
      //   spatialQueryMode: 'INTERSECT',
      //   hasGeometry: true
      // }
    },
    handleData() {
      const url = '/Ip-tielu/iserver/services/data-FangZhiFanWei-2/rest/data/featureResults.json?returnContent=true'
      const paramdata = {
        getFeatureMode: "SQL",
        datasetNames: [`防治范围:FZ_新建金华至建德高速铁路_1`],
        maxFeatures: 10000,
        queryParameter: {
          attributeFilter: `1=1`
        }
      };
      // axios
      //   .post(url, paramdata).then(res => {
      //     console.log(res);
      //   })

      const mxurl = 'http://140.249.18.68:8090/iserver/services/3D-wbscodeCeShi/rest/realspace/datas/wbscdetest/config'

      /* 获取模型 */
      axios({
        url: `${mxurl}`,
        // url: "https://kjzzyy.hzsgis.com:8082/Ip110-25-8090/iserver/services/3D-HangZhengChuChu2018Nian13HaoDiKuai/rest/realspace/datas/杭政储出2018年13号地块/config",
        method: 'get',
      })
        .then((res) => {
          console.log("模型数据————————>", res);
        })
        .catch((error) => { });
      // this.loadSceneLayer('http://140.249.18.68:8090/iserver/services/3D-wbscodeCeShi/rest/realspace','wbscdetest');
      // this.loadSceneLayer('http://140.249.18.68:8090/iserver/services/3D-QiaoDunCeShi/rest/realspace', '桥墩wbscode测试');
      this.loadSceneLayer('http://140.249.18.68:8090/iserver/services/3D-TangShanLuQiaoDunCeShi/rest/realspace', '唐山路桥梁测试2');
      this.getModeData()
    },
    /* 加载模型 */
    loadSceneLayer(url, layerName) {
      let promise = null;
      promise = viewer.scene.open(url);
      promise.then((layers) => {
        const layer = viewer.scene.layers.find(layerName);
        console.log("模型数据2————————>", layer, layers);
        //读取子图层信息，通过数组的方式返回子图层的名称以及子图层所包含的对象的IDs
        layer.setQueryParameter({
          url: url,
          dataSourceName: "BIMBuilding",
          isMerge: true
        });
        layer.datasetInfo().then(function (result) {
          console.log('result id------>', result);
        });
        // datainfo(layer);

      });

    },
    /* 模型构件数据 */
    getModeData() {
      /**
       * @description: 
       * @event: 
       * @param {String} wbscdetest 数据集名称
       * @param {String} ‘http://140.249.18.68:8090/iserver/services/3D-wbscodeCeShi/rest/realspace‘ 数据集url
       * @return {*}
       * @example: url =  三维模型url服务 + datas + 数据集名称 + data/path/attribute.json
       */
      // const url = 'http://140.249.18.68:8090/iserver/services/3D-wbscodeCeShi/rest/realspace/datas/wbscdetest/data/path/attribute.json'
      // const url = 'http://140.249.18.68:8090/iserver/services/3D-wbscodeCeShi/rest/realspace/datas/wbscdetest/data/path/attribute.json'
      const url = 'http://140.249.18.68:8090/iserver/services/3D-QiaoDunCeShi/rest/realspace/datas/桥墩wbscode测试/data/path/attribute.json'
      // axios({
      //   url:url,
      //   method: 'get',
      // }).then(res => {
      //   console.log("构件----->",res);
      // })
      const murl = 'http://140.249.18.68:8090/iserver/services/data-TangShanLuQiaoDunCeShi/rest/data/featureResults.json?returnContent=true';
      const paramdata = {
        getFeatureMode: "SQL",
        datasetNames: [`唐山路桥梁测试2:结构基础_二标桥梁`],
        maxFeatures: 10000,
        queryParameter: {
          attributeFilter: `1=1`
        }
      };
      axios
        .post(murl, paramdata).then(res => {
          console.log("模型数据", res);
        })
    }
  },
};
</script>

<style scoped lang="scss">
</style>

